<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input
        @keyup.enter.native="handleFilter"
        style="width: 200px;"
        class="filter-item"
        placeholder="商品名称"
        v-model="listQuery.goodsName"
      ></el-input>
      <el-input
        @keyup.enter.native="handleFilter"
        style="width: 200px;"
        class="filter-item"
        placeholder="店铺"
        v-model="listQuery.shopName"
      ></el-input>分类:
      <el-select
        v-model="listQuery.mkCode"
        @keyup.enter.native="handleFilter"
        style="width: 150px;"
        class="filter-item"
        clearable
        placeholder="请选择"
        @change="selectMkCodeS(listQuery.mkCode)"
      >
        <el-option
          v-for="item  in topCategory"
          :key="item.code"
          :value="item.code"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-select
        v-model="listQuery.mkCodeS"
        @keyup.enter.native="handleFilter"
        style="width: 150px;"
        class="filter-item"
        clearable
        placeholder="请选择"
      >
        <el-option
          v-for="item  in reClassify"
          :key="item.code"
          :value="item.code"
          :label="item.name"
        ></el-option>
      </el-select>分组:
      <el-select
        v-model="listQuery.mkGroups"
        @keyup.enter.native="handleFilter"
        style="width: 150px;"
        class="filter-item"
        clearable    filterable
        placeholder="请选择"
      >
        <el-option
          v-for="item in shopGrouptions"
          :key="item.groupId"
          :label="item.groupName"
          :value="item.groupId"
        ></el-option>
      </el-select>
      状态:
      <el-select
        v-model="listQuery.mkStatus"
        @keyup.enter.native="handleFilter"
        style="width: 150px;"
        class="filter-item"
        clearable    filterable
        placeholder="请选择"
      >
      <el-option v-for="item in statusArray"  :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
      <el-button
        class="filter-item"
        v-if="goodsManager_btn_add"
        style="margin-left: 10px;"
        @click="handleCreate"
        type="primary"
        icon="edit"
      >添加</el-button>
    </div>
    <el-table
      :key="tableKey"
      :data="list"
      v-loading.body="listLoading"
      border
      fit
      highlight-current-row
      style="width: 99%;overflow: auto;"
    >
      <el-table-column align="center" label="序号" min-width="10%">
        <template scope="scope">
          <span>{{scope.row.goodsId}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="15%" align="center" label="商品图片">
        <template scope="scope">
          <img :src="imgBaseURL + scope.row.titleImage" min-width="70" height="70" />
        </template>
      </el-table-column>
      <el-table-column min-width="30%" align="center" label="商品名称">
        <template scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="分类">
        <template scope="scope">
          <span>{{scope.row.categoryName}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="价格">
        <template scope="scope">
          <span>{{scope.row.currentPrice | currency('￥')}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="店铺">
        <template scope="scope">
          <span>{{scope.row.shopName}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="状态">
        <template scope="scope">
          <span>{{scope.row.statusName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="20%">
        <template scope="scope">
          <el-button
            v-if="promotionManager_btn_add"
            size="small"
            type="primary"
            @click="handleRecommend(scope.row)"
          >推荐</el-button>
          <el-button
            v-if="goodsManager_btn_edit"
            size="small"
            type="success"
            @click="handleUpdate(scope.row)"
          >编辑</el-button>
          <el-button
            v-if="goodsManager_btn_del"
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNo"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog :title="textMap[promoDialogStatus]" :visible.sync="dialogPromotionVisible">
      <goods-promotion @closePromotionDialog="closePromotionDialog" ref="promotionDialog"></goods-promotion>
    </el-dialog>
  </div>
</template>

<script>
import {
  page,
  delObj,
  GetTopCategory,
  GetSecondLevel
} from "api/shop/goods/goods/index";
import { goodsGroup } from "api/shop/goods/group/index";
import { mapGetters } from "vuex";
import { currency } from "@/utils/index";
export default {
  name: "goods",
  components: {
    "goods-promotion": () => import("../promotion/components/promotionDialog")
  },
  data() {
    return {
      imgBaseURL: this.GLOBAL.imgBaseURL,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 20,
        goodsName: undefined,
        shopName: undefined,
        mkCode: undefined,
        mkCodeS: undefined,
        mkGroups: undefined,
        mkStatus: undefined
      },
      goodsManager_btn_edit: false,
      goodsManager_btn_del: false,
      goodsManager_btn_add: false,
      promotionManager_btn_add: false,
      dialogPromotionVisible: false,
      promoDialogStatus: "",
      topCategory: [], //一级分类的数组
      reClassify: [], //二级分类的数组
      shopGrouptions: [],
      statusArray:[
         {
           value:'1',
           label:'上架'
         },
         {
           value:'-1',
           label:'下架'
         },
         {
           value:'0',
           label:'库存'
         }
       ], //状态数组
      reClass: {
        supId: undefined
      },
      textMap: {
        update: "编辑",
        create: "创建"
      },
      tableKey: 0
    };
  },
  created() {
    this.getList();
    this.goodsManager_btn_edit = this.elements["goodsManager:btn_edit"];
    this.goodsManager_btn_del = this.elements["goodsManager:btn_del"];
    this.goodsManager_btn_add = this.elements["goodsManager:btn_add"];
    this.promotionManager_btn_add = this.elements["promotionManager:btn_add"];
    this.handTopCategory();
    this.getAllGroup();
  },
  filters: {
    currency: currency
  },
  computed: {
    ...mapGetters(["elements"])
  },
  methods: {
    getList() {
      this.listLoading = true;
      page(this.listQuery).then(response => {
        this.list = response.data.rows;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    handTopCategory() {
      GetTopCategory().then(response => {
        this.topCategory = response;
      });
    },
    selectMkCodeS(val) {
      this.reClass.supId = val;
      GetSecondLevel(this.reClass).then(response => {
        this.reClassify = response;
      });
    },
    getAllGroup() {
      goodsGroup().then(response => {
        this.shopGrouptions = response;
      });
    },
    handleFilter() {
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val;
      this.getList();
    },
    handleCreate() {
      // this.dialogStatus = 'create';
      // this.dialogFormVisible = true;
      this.$router.push("/shopManager/goodManager/goodsAdd");
    },
    handleUpdate(row) {
      this.$router.push({
        path: "/shopManager/goodManager/goodsEdit",
        query: { id: row.goodsId }
      });
    },
    // handleUpdate(row) {
    // getObj(row.goodsId)
    //   .then(response => {
    //     this.form = response.data;
    //     this.dialogFormVisible = true;
    //     this.dialogStatus = 'update';
    //  });
    // },
    handleRecommend(row) {
      this.dialogPromotionVisible = true;
      this.promoDialogStatus = "create";
      setTimeout(() => {
        this.$refs.promotionDialog.goodsId = row.goodsId;
        this.$refs.promotionDialog.dialogStatus = "create";
        this.$refs.promotionDialog.resetTemp();
        this.$refs.promotionDialog.form.promotionImage = row.titleImage;
      }, 0);
    },
    closePromotionDialog() {
      this.dialogPromotionVisible = false;
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delObj(row.goodsId).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          const index = this.list.indexOf(row);
          this.list.splice(index, 1);
        });
      });
    }
  }
};
</script>